<template>
  <Dialog title="评价计划统计" v-model="dialogVisible" width="1000px">
    <div v-loading="loading">
      <!-- 基本统计信息 -->
      <el-row :gutter="20" class="mb-4">
        <el-col :span="6">
          <el-card class="box-card">
            <div class="stat-item">
              <div class="stat-value">{{ statistics.totalCandidates || 0 }}</div>
              <div class="stat-label">参评总人数</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div class="stat-item">
              <div class="stat-value">{{ statistics.registeredCandidates || 0 }}</div>
              <div class="stat-label">已报名人数</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div class="stat-item">
              <div class="stat-value">{{ statistics.evaluatedCandidates || 0 }}</div>
              <div class="stat-label">已评价人数</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div class="stat-item">
              <div class="stat-value">{{ statistics.passedCandidates || 0 }}</div>
              <div class="stat-label">通过人数</div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 图表统计 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>评价状态分布</span>
              </div>
            </template>
            <div ref="statusChartRef" style="height: 300px"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>评价结果分布</span>
              </div>
            </template>
            <div ref="resultChartRef" style="height: 300px"></div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 详细数据表格 -->
      <el-card class="box-card mt-4">
        <template #header>
          <div class="card-header">
            <span>详细统计数据</span>
          </div>
        </template>
        <el-table :data="detailData" style="width: 100%">
          <el-table-column prop="category" label="类别" width="150" />
          <el-table-column prop="total" label="总数" width="100" />
          <el-table-column prop="registered" label="已报名" width="100" />
          <el-table-column prop="evaluated" label="已评价" width="100" />
          <el-table-column prop="passed" label="通过" width="100" />
          <el-table-column prop="passRate" label="通过率" width="120">
            <template #default="scope">
              <span>{{ scope.row.passRate }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" />
        </el-table>
      </el-card>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
      <el-button type="primary" @click="exportStatistics">导出统计</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'

defineOptions({ name: 'PlanStatistics' })

const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const loading = ref(false) // 加载状态
const planId = ref<number>()

// 统计数据
const statistics = ref({
  totalCandidates: 0,
  registeredCandidates: 0,
  evaluatedCandidates: 0,
  passedCandidates: 0
})

// 详细数据
const detailData = ref([
  {
    category: '理论考试',
    total: 0,
    registered: 0,
    evaluated: 0,
    passed: 0,
    passRate: 0,
    remark: ''
  },
  {
    category: '实操考试',
    total: 0,
    registered: 0,
    evaluated: 0,
    passed: 0,
    passRate: 0,
    remark: ''
  },
  {
    category: '综合评价',
    total: 0,
    registered: 0,
    evaluated: 0,
    passed: 0,
    passRate: 0,
    remark: ''
  }
])

// 图表引用
const statusChartRef = ref()
const resultChartRef = ref()

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  planId.value = id
  await loadStatistics()
  nextTick(() => {
    initCharts()
  })
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 加载统计数据 */
const loadStatistics = async () => {
  loading.value = true
  try {
    // TODO: 调用API获取统计数据
    // const data = await getPlanStatistics(planId.value)
    // statistics.value = data
    
    // 模拟数据
    statistics.value = {
      totalCandidates: 150,
      registeredCandidates: 120,
      evaluatedCandidates: 100,
      passedCandidates: 85
    }
    
    detailData.value = [
      {
        category: '理论考试',
        total: 120,
        registered: 120,
        evaluated: 100,
        passed: 90,
        passRate: 90,
        remark: '理论考试整体通过率较高'
      },
      {
        category: '实操考试',
        total: 120,
        registered: 120,
        evaluated: 100,
        passed: 80,
        passRate: 80,
        remark: '实操考试难度较大'
      },
      {
        category: '综合评价',
        total: 120,
        registered: 120,
        evaluated: 100,
        passed: 85,
        passRate: 85,
        remark: '综合评价结果良好'
      }
    ]
  } finally {
    loading.value = false
  }
}

/** 初始化图表 */
const initCharts = () => {
  // 状态分布图表
  const statusChart = echarts.init(statusChartRef.value)
  statusChart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '评价状态',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: statistics.value.registeredCandidates, name: '已报名' },
          { value: statistics.value.evaluatedCandidates, name: '已评价' },
          { value: statistics.value.totalCandidates - statistics.value.registeredCandidates, name: '未报名' }
        ]
      }
    ]
  })

  // 结果分布图表
  const resultChart = echarts.init(resultChartRef.value)
  resultChart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '评价结果',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: statistics.value.passedCandidates, name: '通过' },
          { value: statistics.value.evaluatedCandidates - statistics.value.passedCandidates, name: '未通过' }
        ]
      }
    ]
  })
}

/** 导出统计 */
const exportStatistics = () => {
  message.success('导出功能开发中...')
}
</script>

<style scoped>
.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  margin-bottom: 20px;
}
</style> 